<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <!-- CSS Begins       -->
        <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="css/login.css" type="text/css">
        <!--        <link rel="stylesheet" href="css/cart.css" type="text/css">-->
        <!--   End of CSS            -->
        <!----------Scripts--------->
        <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>


        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/jquery.tabletojson.min.js" type="text/javascript"></script>
        <script src="js/custom.js" type="text/javascript"></script>
        <script src="js/handlebars-v1.3.0.js" type="text/javascript"></script>
        <script src="js/jquery.cookie.js" type="text/javascript"></script>
        <script src="js/loadcart.js" type="text/javascript"></script>
        <script src="js/loadProducts.js" type="text/javascript"></script>

        <!--        <script src="js/cart_Pop.js" type="text/javascript"></script>-->
        <script src="js/jquery.validate.js" type="text/javascript"></script>



        <!-----End of Scripts---->

        <script>
            $(function()
            {

//                includes("navbartop_Templ",{},"#navbar");
//                includes("navbar2_Templ",{},"#navbar2");
//                includes("carousel_Templ",{},"#car");
//                includes("cart_Templ",{},"#cart");
                $("#btn_Order").prop("disabled", true);





                var promise = $.getJSON("fbapp/User/ptest");
                promise.done(function(result)
                {
                    var product = result;
                    includes("navbarUser_Templ", {}, "#navbar");
//                    includes("navbar2_Templ", {}, "#navbar2");
                    includes("carousel_Templ", {}, "#car");
                    includes("product_Tmpl", product, "#listp");
//                    includes("cart_Tmpl", {}, "#cart");
//                    $("#logoutBtn").click(function() {
//                        window.location.href = "http://localhost:8080/FBAPP/logout";
//                    });
                    var cartcookie = $.cookie("cart-data");
                    if (cartcookie != null)
                    {
                        var test = JSON.parse(cartcookie);
                    }
                    else
                    {
                        var test=null;
                    }
                    if (test != null) {
                        $("#btn_Order").prop("disabled", false);
                        var table_obj = $('#productsListTable');
                        $.each(test, function(index, item) {
                            var table_row = $('<tr>', '');
                            var itemNoCell = $('<td>', {html: '<label id="prodid_' + item['Product ID'] + '" data-unitprice="' + item['Product ID'] + '">' + item['Product ID'] + '</label>'});
                            var itemNameCell = $('<td>', {html: item['Item Name']});
                            var unitPriceCell = $('<td>', {html: item['Unit Price']});
                            var quantityCell = $('<td>', {html: '<label id="prodqty_' + item['Product ID'] + '" data-qty="' + item.Quantity + '">' + item.Quantity + '</label>'});
                            var removebtnCell = $('<td>', {html: '<button class="form-control" id="removebtn_' + item['Product ID'] + '" value="remove" data-inventoryId=' + item['Product ID'] + '>Remove</button>'});
                            table_row.append(itemNoCell);
                            table_row.append(itemNameCell);
                            table_row.append(unitPriceCell);
                            table_row.append(quantityCell);
                            table_row.append(removebtnCell);
                            table_obj.append(table_row);
                        });
                    }

                    $("button[id^='removebtn_']").click(function()
                    {
                        var tr = $(this).closest('tr');
                        tr.remove();
                        var cnt = $('#productsListTable tr').length;
                        if (cnt == 1)
                            $("#btn_Order").prop("disabled", true);
//                                document.getElementById("productsListTable").deleteRow(i);
                    });

                    //---Add to--Cart---//
                    $("button[id^='addbtn_']").click(function()
                    {
                        var productID = $(this).data("productid");

                        $("#btn_Order").prop("disabled", false);
//                        addtocart(prodid);
//                        alert("working"+prodid);
                        //   $(this).toAjax("fbapp/User/getP",success,fail,JSON.stringify(prodid),"application/json");

                        var promise = $.getJSON("fbapp/User/getP/" + productID);
                        promise.done(function(result)
                        {
                            var product = result;
                            var isExisting = false;
                            $("label[id^='prodid_']").each(function() {
                                if ($(this).text() == product.productID)
                                    isExisting = true;
                            })
                            if (!isExisting) {
                                var table = document.getElementById("productsListTable");
                                var count = 1;
                                var row = table.insertRow(count);
                                var itemNoCell = row.insertCell(0);
                                var itemNameCell = row.insertCell(1);
                                var unitPriceCell = row.insertCell(2);
                                var quantityCell = row.insertCell(3);
                                var removebtnCell = row.insertCell(4);
                                itemNoCell.innerHTML = '<label id="prodid_' + product.productID + '" data-unitprice="' + product.productID + '">' + product.productID + '</label>';
                                itemNameCell.innerHTML = product.PName;
                                unitPriceCell.innerHTML = product.pricePerUnit;
                                quantityCell.innerHTML = '<label id="prodqty_' + product.productID + '" data-qty="' + 1 + '">' + 1 + '</label>';
                                removebtnCell.innerHTML = '<button class="form-control" id="removebtn_' + product.productID + '" value="remove" data-inventoryId=' + product.productID + '>Remove</button>';

                            } else {
                                var qty = Number($('#prodqty_' + product.productID).text()) + 1;
                                $('#prodqty_' + product.productID).text(qty);
                            }
                            $("button[id^='removebtn_']").click(function()
                            {
                                var tr = $(this).closest('tr');
                                tr.remove();
                                var cnt = $('#productsListTable tr').length;
                                if (cnt == 1)
                                    $("#btn_Order").prop("disabled", true);
//                                document.getElementById("productsListTable").deleteRow(i);
                            });

                        });
                    });
                    //---End Add to--Cart---//

                    //--Persist in DataBase--//
                });
                $("#btn_Order").click(function()
                {
                    function success(data)
                    {
                        if (data.error == true)
                        {
                            console.log("fail");
                            //display the error message
                            includes("errorPane_template", data, "#msgPane");
                            // setTimeout(function(){window.location.replace("CustomerRegistration.html");},4000);  
                        }
                        else
                        {
                            $.cookie("cart-data", '', {expires: -1});

                            includes("thankyou_Templ", {title: "Your Order has been Placed", message: "Thank you for shopping with us"}, "#msg");
                            setTimeout(function() {
                                window.location.replace("index.html");
                            }, 4000);
                        }

                    }
                    ;
                    function fail()
                    {


                    }
                    ;
                    var products = $("#productsListTable").tableToJSON();
                    console.log(products);
                    $(this).toAjax("fbapp/User/order", success, fail, JSON.stringify(products), "application/json");// send to servlet

                });

            });
        </script>
    </head>

    <body>
        <div class="container col-lg-12">
            <div class="row">
                <div class="col-lg-12">
                    <div id="navbar">
                    </div>
                </div>
                <br>
                <br>
                <br>
                <div id="msg">
                    <div class="col-lg-9">
                        <!--                        <div id="navbar2">
                        
                                                </div>-->
                        <div id="car">
                        </div>
                        <div id="listp">
                        </div>
                    </div>
                    <div id="cart" class="col-lg-3"> 
                        <div>
                            <div class="row">
                                <br>
                                <br>
                                <br>
                                <br>
                                <br>
                                <br>
                                <br>
                                <div id="testdiv"></div>
                                <div class="bs-example table-responsive col-lg-8 col-lg-offset-2">
                                    <table id="productsListTable"  class="table table-striped table-bordered table-hover text-center">
                                        <caption>Shopping Cart</caption>
                                        <thead >
                                            <tr class="success">
                                                <th>Product ID</th> 
                                                <th>Item Name</th>
                                                <th>Unit Price</th>
                                                <th>Quantity</th>
                                                <th>Remove</th>
                                            </tr>
                                        </thead>

                                        <button type="submit" id="btn_Order"> Place Order</button>

                                    </table>        
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!--        <div class=" cart bs-docs-section ">
                
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="page-header">
                                        <h1 id="tables">Shopping Cart</h1>
                                    </div>
                
                
                                    <div class="bs-example table-responsive">
                                        <table id="cartcontent" fitColumns="true" class="table table-striped table-hover ">
                                            <thead>
                                                <tr>
                
                                                    <th class="col-lg-3" field="name">Name</th>
                                                    <th class="col-lg-3"field="quantity">Quantity</th>
                                                    <th class="col-lg-3" field="price">Price </th>
                                                    <th class="col-lg-3" field="remove">Remove </th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                
                                </div>
                                <p class="total">Total: $0</p>
                                <h2>Drop here to add to cart</h2>
                                <div>
                                    <button id="confirm">Place Order</button>
                                </div>
                            </div>
                        </div><-->
            </div></div> 
    </body>
</html>
